<template>
  <div class="example" :style="{ height: height, width: width }"></div>
</template>

<script>
//可参考realMap页面进行调用：
import echarts from "echarts";
require("echarts/theme/macarons");
import { debounce } from "@/utils/debounce.js";
export default {
  props: {
    idName: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        setTimeout(() => {
          this.commonCharts();
          this.__resizeHanlder = debounce(() => {
            if (this.chart) {
              this.chart.resize();
            }
          }, 100);
          window.addEventListener("resize", this.__resizeHanlder);
        }, 1000);
      },
    },
  },
  mounted() {
    this.commonCharts();
    this.__resizeHanlder = debounce(() => {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100);
    window.addEventListener("resize", this.__resizeHanlder);
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    window.removeEventListener("resize", this.__resizeHanlder);
    this.chart.dispose();
    this.chart = null;
  },

  methods: {
    commonCharts() {
      // macarons 可以将折线图变成曲线图
      this.chart = echarts.init(this.$el, "macarons");
      var shuzu = [];
      this.chartData.series.map((item) => {
        //判断是否显示图例
        if (item.islegend) {
          shuzu.push(item.name);
        } else {
          shuzu = [];
        }
        //判断是否渐变色：
        if (item.isclor) {
          item.itemStyle = {
            normal: {
              //柱状图变颜色：
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#83bff6" },
                { offset: 0.5, color: "#188df0" },
                { offset: 1, color: "#188df0" },
              ]),
              label: {
                show: true, //开启树状图显示相应数字
                position: "top", //在上方显示
                textStyle: {
                  //数值样式
                  color: "#00ccff",
                  fontSize: 12,
                },
              },
            },
          };
        } else {
          item.itemStyle = { color: "#83bff6" };
        }
      });
      this.chart.setOption({
        title: {
          text: this.chartData.text,
          x: "center", //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' |
          y: "4%", //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' |
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 14,
            color: "#00ccff",
            fontStyle: "normal",
            fontWeight: "normal",
          },
        },
        //   鼠标放上去显示相应数据
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "bar",
            crossStyle: {
              color: "#999",
            },
          },
          // show:false //设置不显示
        },
        legend: {
          data: shuzu,
          icon: "rect", //设置图例形状
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 30, //设置图例之间的间隔
          padding: [10, 10, 10, 10],
          textStyle: {
            color: "red", //图例字体颜色
          },
          top: 22,
          right: 10,
        },
        grid: {
          left: "15%", //y轴移动
        },
        xAxis: [
          {
            type: "category",
            data: this.chartData.xData, //x轴数据
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              color: "red", //x轴坐标颜色
              lineHeight: 25,
              fontSize: 10,
              lineStyle: {
                color: "red",
                width: 6, //轴线宽度
              },
            },
            axisTick: { show: false }, // 是否显示坐标轴刻度
            splitArea: { show: false }, //网格区域面积
            splitLine: { show: false }, //网格线
          },
        ],
        yAxis: [
          {
            type: "value",
            name: this.chartData.name,
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              color: "blue", //y轴字体颜色
            },
            axisTick: { show: false }, // 是否显示坐标轴刻度
            splitLine: {
              show: true,
              lineStyle: {
                color: ["#008acd82"],
                width: 1,
                type: "solid",
              },
            }, // 网格线
            splitArea: { show: false }, // 网格区域面积
            nameTextStyle: {
              color: "#fff", //y轴单位颜色
              fontSize: 10,
            },
            nameLocation: "end",
          },
          {
            type: "value",
            name: this.chartData.name,
            min: 0,
            max: 250,
            interval: 50,
            show: false,
          },
        ],
        series: this.chartData.series,
      });
    },
  },
};
</script>
<style>
.example {
  width: 80%;
  height: 400px;
  margin: 0 auto;
}
</style>

